<template>
    <div class="orderListRuleForm">
        <panle content="拼团统计记录" title='拼团统计记录'></panle>

        <el-form ref="form" :inline="true" :model="form" class="demo-form-inline" label-width="80px">
            <!--
            <el-form-item label="项目" prop="desc_type">
                <el-select v-model="form.desc_type" placeholder="请选择" size="mini" clearable>
                    <el-option label="曝光" value="1"></el-option>
                    <el-option label="下单" value="2"></el-option>
                    <el-option label="分享" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="form.desc_type==2" label="类型" prop="desc_child">
                <el-select v-model="form.desc_child" placeholder="请选择" size="mini" clearable>
                    <el-option label="下单" value="1"></el-option>
                    <el-option label="支付" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="form.desc_type==3" label="类型" prop="desc_child">
                <el-select v-model="form.desc_child" placeholder="请选择" size="mini" clearable>
                    <el-option label="下载海报" value="1"></el-option>
                    <el-option label="点击分享" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="form.desc_type>1" label="子类型" prop="desc_child_desc">
                <el-select v-model="form.desc_child_desc" placeholder="请选择" size="mini" clearable>
                    <el-option label="开团" value="1"></el-option>
                    <el-option label="参团" value="0"></el-option>
                </el-select>
            </el-form-item>
            -->
            <el-form-item label="时间筛选" prop="create_time">
                <el-date-picker
                    v-model="form.create_time"
                    :default-time="['00:00:00', '23:59:59']"
                    :picker-options="pickerOptions"
                    align="right"
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd"
                    range-separator="至"
                    size="mini"
                    start-placeholder="开始日期"
                    type="daterange"
                    unlink-panels
                    value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
            </el-form-item>

            <el-form-item>
                <el-button size="mini" type="primary" @click="search">搜索</el-button>
                <el-button size="mini" @click="resetForm('form')">重置</el-button>
                <el-button size="mini" @click="init()">刷新</el-button>
                <!--                <vue-json-excel-->
                <!--                    style="display: inline;margin-left: 10px;"-->
                <!--                    :data="tableData"-->
                <!--                    :fields="excelFields"-->
                <!--                    name="导出流失提醒.xlsx"-->
                <!--                    type="xlsx">-->
                <!--                    <el-button size="mini">导出</el-button>-->
                <!--                </vue-json-excel>-->

            </el-form-item>
        </el-form>

        <div class="table-wrap">
            <el-table v-loading="loading" :data="tableData" show-summary border default-expand-all row-key="id"
                      stripe style="width: 100%;margin-bottom: 20px;">
                <!--<el-table-column fixed type="selection" width="55"></el-table-column>-->
                <!--<el-table-column label="ID" prop="id"></el-table-column>-->
                <el-table-column label="商品名称" prop="name"></el-table-column>
                <el-table-column label="活动时间" prop="start_time">
                    <template slot-scope="scope">
                        <span v-if="scope.row.start_time">{{scope.row.start_time.substring(2, 13) +' —— '+ scope.row.end_time.substring(2, 13) }}</span>
                        <span v-else>——</span>
                    </template>
                </el-table-column>
                <el-table-column label="发起人" prop="popu_name"></el-table-column>
                <el-table-column label="曝光人数" prop="num"></el-table-column>
                <el-table-column label="下单人数" prop="place_num"></el-table-column>
                <el-table-column label="支付人数" prop="payment_num"></el-table-column>
                <el-table-column label="开团数" prop="groups_num"></el-table-column>
                <el-table-column label="成团数" prop="groups_size"></el-table-column>
                <el-table-column label="分享人数" prop="groups_share"></el-table-column>
                <el-table-column label="下载海报人数" prop="groups_download"></el-table-column>
                <!--
                <el-table-column label="项目" prop="desc_type">
                    <template slot-scope="scope">
                        <span v-if="scope.row.desc_type == 1">曝光</span>
                        <span v-else-if="scope.row.desc_type == 2">下单</span>
                        <span v-else-if="scope.row.desc_type == 3">分享</span>
                        <span v-else>——</span>
                    </template>
                </el-table-column>
                <el-table-column label="类型" prop="desc_child">
                    <template slot-scope="scope">
                        <span v-if="scope.row.desc_type == 2 && scope.row.desc_child == 0">下单</span>
                        <span v-else-if="scope.row.desc_type == 2 && scope.row.desc_child == 1">支付</span>
                        <span v-else-if="scope.row.desc_type == 2 && scope.row.desc_child == 2">退款</span>
                        <span v-else-if="scope.row.desc_type == 3 && scope.row.desc_child == 1">下载海报</span>
                        <span v-else-if="scope.row.desc_type == 3 && scope.row.desc_child == 2">点击分享</span>
                        <span v-else>——</span>
                    </template>
                </el-table-column>
                <el-table-column label="子类型" prop="desc_child_desc">
                    <template slot-scope="scope">
                        <span v-if="scope.row.desc_child_desc == 1">开团</span>
                        <span v-else-if="scope.row.desc_child_desc == 2">参团</span>
                        <span v-else>——</span>
                    </template>
                </el-table-column>
                <el-table-column label="人数" prop="person" width="50"></el-table-column>
                <el-table-column label="次数" prop="read" width="50"></el-table-column>
                <el-table-column label="操作链接" prop="link_yard"></el-table-column>
                <el-table-column label="链接所属人" prop="popu_name"></el-table-column>
                <el-table-column label="记录时间" prop="time">
                    <template slot-scope="scope">
                        <span v-if="scope.row.time">{{scope.row.time | formatDate}}</span>
                        <span v-else>——</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作人" prop="user_nickname"></el-table-column>
                -->
                <!--
                <el-table-column label="操作" prop="id">
                    <template slot-scope="scope">
                        <PersButton label="详情" perms="sell:team:list" round type="primary" @click="infoGrooups(scope.row)"></PersButton>
                    </template>
                </el-table-column>
                -->
            </el-table>
            <div class="block">
                <el-pagination :current-page="form.pageNumber" :page-size="form.pageSize"
                               :page-sizes="[10, 50, 100, 200]" :total="form.total"
                               background
                               layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                               @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>

        <el-dialog v-loading="loading" :visible.sync="groupsOpen" append-to-body title="拼团团队详情">
            <el-form ref="grform" :model="grform" label-width="80px">

                <div class="table-wrap">
                    <el-table v-loading="loading" :data="tableGroupsData" border
                              default-expand-all row-key="id" :summary-method="getSummaries"
                              stripe style="width: 100%;margin-bottom: 20px;">
                        <el-table-column label="ID" prop="id"></el-table-column>
                        <el-table-column label="拼团号" prop="group_no"></el-table-column>
                        <el-table-column label="状态" prop="state">
                            <template slot-scope="scope">
                                {{ scope.row.state == 1 ? '未成团' : scope.row.state == 2 ? '已成团' : '已取消' }}
                            </template>
                        </el-table-column>
                        <el-table-column label="海报下载人数" prop="groups_download"></el-table-column>
                        <el-table-column label="分享人数" prop="groups_share"></el-table-column>

                    </el-table>
                    <div class="block">
                      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                     :current-page="form.pageNumber" :page-sizes="[10, 50, 100, 200]"
                                     :page-size="form.pageSize"
                                     background layout="total, sizes, prev, pager, next, jumper"
                                     :total="form.total">

                      </el-pagination>
                    </div>
                </div>
            </el-form>

        </el-dialog>

    </div>

</template>

<script>
import {
    countCustomerLoss,
    getCustomerLossData,
    getLapsedData,
    getStaffData,
    getStatusIngormation,
    sendStaff
} from "@/api/scrm/lapsed/lapsed";

import Panle from '@/components/Panle';
import PersButton from '@/components/PersButton';
import {hasPermission, isShow} from '@/common/permission';
import VueJsonExcel from 'vue-json-excel';
import {getOrderRecordList} from "@/api/sell/orderRecord/orderRecord";
import {getGroupsInfo, getGroupsTeamList} from "@/api/sell/groupsTeam/groupsTeam";

export default {
    name: 'Live-Order',
    components: {
        Panle,
        PersButton,
        VueJsonExcel
    },
    data() {
        return {
            options: [],
            value: '',
            loading: false,
            open: false,
            tableData: [],
            person: 0,
            tableGroupsData: [],
            number: 0,
            groupsOpen: false,
            status: 0,
            form: {
                desc_type: '',
                desc_child: '',
                desc_child_desc: '',
                pageSize: 10,
                pageNumber: 1,
                total: 0,
                create_time: []

            },
            grform: {},
            optionsVa: [],
            value1: [],

            resForm: {
                pageSize: 10,
                pageNumber: 1,
                total: 0,
            },
            pickerOptions: {
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            const current = new Date();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + current.getDate(); //年月日
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month).getTime());
                            end.setTime(new Date(month + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const current = new Date();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + (current.getDate() - 1); //年月日
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month).getTime());
                            end.setTime(new Date(month + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '上一周',
                        onClick(picker) {
                            const current = new Date();
                            const start_day = current.getDate() - current.getDay() - 6;
                            const end_day = current.getDate() - current.getDay();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-'; //年月
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month + start_day).getTime());
                            end.setTime(new Date(month + end_day + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    }
                ]
            },
            excelFields: {
                "客户 ": "client_name",
                "添加员工": "staff_name",
                "企业标签": "tag_name",
                "流失时间": "lapsed_time",
                "添加时间": "add_time",
                "添加员工时长（天）": "day_time",

            }
        }
    },
    created() {
        sessionStorage.removeItem('live-stat')

        this.init(true);
    },
    methods: {
        hasPermission,
        isShow,
        init() {
            this.loading = true;
            getGroupsTeamList(this.form).then((res) => {
                this.tableData = res.data.data;
                this.form.total = res.data.total;
                // this.person = res.data.person;
                this.loading = false;
            })

        },
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '合计';
                } else if (index === 4) {
                    sums[index] = this.person;
                } else if (index === 5) {
                    sums[index] = '';
                }
            });
            return sums;
        },
        search: function () {
            this.loading = true;
            this.form.pageSize = 10;
            this.form.pageNumber = 1;
            this.init();
        },
        handleSizeChange: function (e) {
            this.form.pageSize = e;
            this.init();
        },
        handleCurrentChange: function (e) {
            this.form.pageNumber = e;
            this.init();
        },
        resetForm(formName) {
            this.form.name = ''
            this.form.popu_name = ''
            this.form.link_status = ''
            this.init();
        },
        infoGrooups: async function (data) {
            let editForm = {
                "link_yard": data.link_yard,
            }
            const res = await getGroupsInfo(editForm);
            this.tableGroupsData = res.data;
            this.groupsOpen = true;
        },
        submitForm: function (data) {

            this.$refs[data].validate((valid) => {
                if (valid) {
                    sendStaff(this.resForm).then((res) => {
                        if (res.code == 200) {
                            this.msgSuccess(res.msg);
                            this.open = false;
                            this.init();

                        } else {
                            this.msgError(res.msg);
                        }
                    })
                } else {
                    return false;
                }
            })
        },

    }
}

</script>

<style lang="scss" scoped>
.demo-form-inline {
    margin: 20px;

    .el-form-item {
        margin-bottom: 0;
    }
}

.el-form--inline .el-form-item {
    display: inline-block;
    vertical-align: top;
}

.orderListRuleForm .el-form-item {
    margin-bottom: 0;
}

.search-content {
    width: 100%;
    margin: 20px;
}


</style>